<template>
    <!-- 搜索 -->
    <div class="search">
        <label>根据姓名搜索</label>
        <el-select v-model="searchKey" @click="clearSearchKey" filterable clearable remote placeholder="输入姓名搜索"
            :remote-method="remoteMethod" @change="searchChange" :loading="searcLoading">
            <el-option v-for="item in searchOptions" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
    </div>
    <!-- 添加按钮 -->
    <el-button type="primary" :icon="Plus" @click="addSut">添加项目</el-button>
    <!-- 展示数据表格 -->
    <div class="table">
        <el-table :data="tableData" v-loading="tableLoading" border style="width: 100%">
            <el-table-column prop="headimgurl" align="center" width="160" label="头像">
                <template v-slot="{ row }">
                    <el-avatar size="large" shape="square" :src="row.headimgurl"></el-avatar>
                </template>
            </el-table-column>

            <el-table-column prop="name" label="姓名" width="160" align="center" />
            <el-table-column prop="degree" label="学历" width="160" align="center" />
            <el-table-column prop="class" label="班级" width="160" align="center" />
            <el-table-column prop="productUrl" label="项目" width="160" align="center" />
            <el-table-column prop="cTime" label="创建时间" width="160" align="center" />
            <el-table-column prop="address" label="操做" width="200" align="center">
                <template v-slot="{row}">
                <el-button type="success" :icon="View" circle />
                <el-button type="primary" :icon="Edit" @click="edit(row)" circle />
                <el-button type="danger" :icon="Delete" @click="del(row.sId)" circle />
                </template>
            </el-table-column>

        </el-table>
    </div>

    <!-- 分页 -->
    <el-pagination background layout="prev, pager, next" @current-change="pageChange" :page-size="pageSize"
        :current-page="currentPage" :total="total" />
    <!-- dialog弹窗组件 -->
    <qf-dialog :dialogFormData="dialogFormData" 
    @validateSuccess="dialogFormDataSuccess"
    @dialogCancel="dialogCancel"
    :visible="dialogVisible"
    @closed="close"
    :title="dialogTitle"
    >  
    <template v-slot:upload>
    <el-upload
    v-loading="uploadLoading"
    class="avatar-uploader"
    method="post"
    action="/api/students/uploadStuAvatar"
    name="headimgurl"
    :show-file-list="false"
    :on-success="handleAvatarSuccess"
    :before-upload="beforeAvatarUpload"
  >
    <img v-if="imageUrl" :src="imageUrl" class="avatar" />
    <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
  </el-upload>
    </template>
    </qf-dialog>
</template>
<script setup>
import qfDialog from "../../../../components/dialog/index.vue"
import { ElMessage,ElMessageBox  } from "element-plus"
import * as api from "../../../../api/stu"
import { reactive, ref } from "vue"
import { onMounted } from "vue";
import {
    Plus,
    Delete,
    View,
    Edit,
    Search,
} from "@element-plus/icons-vue"

// 搜索逻辑
// 搜索的数据
let searchOptions = ref([])

// 搜索关键字
let searchKey = ref('')
// 搜索加载动画
let searcLoading = ref(false)
let tableLoading = ref(true)
// 搜索框输入后会触发的方法，这里负责呈现搜索的联想数据
let remoteMethod = async (currentKeyword) => {

    if (!currentKeyword) {
        currentPage.value = 1
        return
    }
    // 打开表格加载动画
    // tableLoading.value=true
    searcLoading.value = true
    // //这个三元的目 的是为了保证用户在输入或者 在选择的时候都能获取到搜索关键字
    // let key =searchKey.value ? searchKey.value:currentKeyword
    try {
        // 搜索all数据,传''
        let res = await api.searchStuListApi(currentKeyword, '')
        //    给联想的列表进行赋值
        let repeatDatas = res.data.data.map(item => ({ value: item.name }));
        let norepeatDatas = []
        for (var i = 0; i < repeatDatas.length; i++) {
            // 声明开关
            let flag = true;
            for (var j = 0; j < norepeatDatas.length; j++) {
                if (repeatDatas[i].value === norepeatDatas[j].value) {
                    flag = false
                    break;
                }
            }
            if (flag) {
                norepeatDatas.unshift(repeatDatas[i])
            }
        }

        searchOptions.value = norepeatDatas
        searcLoading.value = false
        // 操做表格
        tableData.value = res.data.data
        // 关闭动画
        tableLoading.value = false
        searcLoading.value = false
    } catch (e) {
        console.log(e);
        tableLoading.value = false
        searcLoading.value = false
    }
}
// 列表逻辑
// 表格数据   
let tableData = ref([])
// 请求表格数据 (封装的方法)
let getStulist = async (page, count, classes) => {
    // 开启加载动画
    tableLoading.value = true
    try {
        // 请求列表数据
        let res = await api.getStuListApi(page, count, classes)
        // 给表格数据赋值
        tableData.value = res.data.data
        total.value = res.data.total
        // console.log(tableData.value, '21354');
        // 关闭加载动画
        tableLoading.value = false
    } catch (e) {
        console.log(e);
        searcLoading.value = false
    }
}
// 清空关键字之后的方法
let clearSearchKey = () => {
    // console.log('111');
    // 初始化清空后页码回到第一页
    currentPage.value = 1
}
// 用户选择了输入框之后，负责更新表格数据 
let searchChange = async (key, page = 1, count = 10) => {
    // 获取用户点选值
    // 打开表格的loading动画
    tableLoading.value = true
    // 清空上次获取到的选项
    searchOptions.value = []
    try {
        let res = await api.searchStuListApi(searchKey.value, page, page)
        // 对表格数据的操做,将搜索结果赋值给表格

        tableData.value = res.data.data
        tableLoading.value = false
        // 搜索结果分页
        setPageNation(res.data.total)
    } catch (e) {
        console.log(e);
        tableLoading.value = false
    }
}
// 处理分页器
// 1.当前的页码
// total属性
let total = ref(1)
// 一页多少条
let pageSize = ref(10)
// 默认的页码
let currentPage = ref(1)
// 页面变更时
let pageChange = (inputCurrentPage) => {
    // 动态变更页码
    currentPage.value = inputCurrentPage
    // console.log(current);、
    // 页码切换，重新请求数据
    // 判断有没有关键字,若有更新搜索分页结果
    if (searchKey.value) {
        searchChange(null, inputCurrentPage)
    } else {
        getStulist(inputCurrentPage)
    }
}



// 添加sut信息
//声明dia logVis ible控制dialog 
// dialog标题
let dialogTitle=ref('增加数据')

let addSut = () => {
    // 打开dialog
    dialogVisible.value=true
    dialogTitle.value='增加数据'
}

// dialog的数据源
let dialogFormData = reactive({
    class: {
            label: '班级',
            value: ''
        },
        name: {
            label: '姓名',
            value: ''
        },
        age: {
            label: '年龄',
            value: ''
        },
        city: {
            label: '城市',
            value: ''
        },
        degree: {
            label: '学历',
            value: ''
        },
        productUrl: {
            label: '项目地址',
            value: ''
        },
        description: {
            label: '描述',
            value: ''
        }
})
 

// dialog点击的确定按钮,并且通过表单验证
let dialogFormDataSuccess = async (form) => {
    // 发起请求，将输入的内容传递给服务器 
    console.log(dialogFormData );
        let message='添加成功'
    let params ={
        headimgurl:'',
        class:dialogFormData.class?.value,
        name:dialogFormData.name?.value,
        age:dialogFormData.age?.value,
        city:dialogFormData.city?.value,
        degree:dialogFormData.degree?.value,
        productUrl:dialogFormData.productUrl?.value,
        description:dialogFormData.description?.value,
    }
    try{
        let apiMethod=null;
        switch (dialogTitle.value){
            case '增加数据':
            apiMethod = api.addStuApi;
            //删除除sId这条属性
            params.sId? delete params.sId:""
            break; 
            case '编辑数据':
            apiMethod=api.updateStuApi;
            //给params中添加sId属性
            params.sId=sId.value;
            //更改提示信息
            message='修改成功'  
        }
         //判断是否 上传头像,如果上传了,那么携带到params中去
         params.headimgurl=headimgurl.value? headimgurl.value:''
          
       let res =await apiMethod(params)
        // console.log(res,'12354');
        // 根据dialogtitle来区分要发送编辑请求还是发送增加请求

        // 提示添加成功
        ElMessage({
            type:'success',
            message
        })
        // 2.关闭dialog
        dialogVisible.value=false
        // 3.清空表单
        form.value.resetFields()
        // 4.更新列表
        getStulist()
        console.log(res);
    }catch(e){
        ElMessage({
            type:'error',
            message:e.toString()
        })
        // console.log(e);
    }
}

let dialogVisible=ref(false)
//点击dia log取消按钮触发的逻辑
let dialogCancel=()=>{
    // console.log('已取消');
    dialogVisible.value=false
}
//dialog关闭之后,要同步控制关闭属性的值
//这么做的目的是为了处理点击空白区域或者右上角叉叉的时候,造成的后续dia log不能弹出的情况

let close =()=>{
    dialogVisible.value=false
    // 将数据清空
    let keys=Object.keys(dialogFormData);
        keys.forEach(key=>{
            dialogFormData[key].value=""
        })
        // 清空头像回显
        imageUrl.value=''
}

// 编辑
//声明一个变量 ，存储sId ,便于编辑的时候传递给后端
let sId=ref("")

let edit =(row)=>{
   //1.打开dialog  
   dialogVisible.value=true
console.log(row);
    //2. 修改标题 
dialogTitle.value='编辑数据'
   //3.数据需要回显
    let keys=Object.keys(dialogFormData)
    keys.forEach(key=>{
        dialogFormData[key].value=row[key]
    })

// sid赋值
sId.value=row.sId
//更改全局的headimgurl这个字段,便于数据的回显操作
headimgurl.value=row.headimgurl;
// 回显
imageUrl.value=row.headimgurl
}
let del =(row)=>{
    //获取当前这条数据的id,传递给后台就可以了
    // 1.交互,用户却是否删除
    ElMessageBox.confirm('此操作将永久删除 '+row.name+', 是否继续','删除提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
    )
   .then(  async() => {
    //2.发请求,删除数据
       try{
      let res =await api.delStuApi(row)
        ElMessage({
            type:'success',
            message:'删除成功'
        })

        // 删除成功更新列表
        getStulist()
       }catch(e){
        ElMessage({
            type:'error',
            message: e.toString()
        })
       }
   })
   
   .catch(()=>{
    ElMessage({
            type:'warning',
            message:'已取消删除'
        })
   })
   
    //2.发请求,删除数据
}
// 上传文件
// 一个保存上传地址的变量
let imageUrl=ref()
//声明一个headimgurl变量,用于将参数在泰单dia log通过的时候,一并提交给后台
//加载动画
let uploadLoading=ref(false)
let headimgurl=ref('')
 //.上传成功的方法
let handleAvatarSuccess =(res,uploadFile)=>{
    if(res.state){
        // 头像上传成功
        ElMessage({
            type:'success',
            message:res.msg
        })
        headimgurl.value=res.headimgurl;
    }else{
        ElMessage({
            type:'error',
            message:res.msg
        })
    }
      //关闭上传图片加载动画
    uploadLoading.value=false
    imageUrl.value = URL.createObjectURL(uploadFile.raw)
}

// 上传之前

let beforeAvatarUpload =(rawFile)=>{

    console.log(rawFile.type);
    // 允许文件类型
    let acceptType=['image/jpeg','image/png']
// 判断上传文件类型是否在上面数组中
    let isAccept =acceptType.includes(rawFile.type)
    if (!isAccept) {
    ElMessage.error('上传的文件类型只能是jpeg或者是png,您当前上传的文件类型是'+rawFile.type)
    return false
  } else if (rawFile.size / 1024 / 1024 >20) {
    ElMessage.error('上传的文件不能超过10MB')
    return false
  }
      //打开加载动画
      uploadLoading.value=true
  return true
}

onMounted(() => {
    getStulist()
})


// 分页器 专门修改分页器内容的方法
let setPageNation = (totalCount = 10, count, currentPage = 1) => {
    total.value = totalCount
    pageSize.value = count
}
</script>
<script >
export default {
    meta: {
        title: 'xyxmgl',
        name: '学员项目管理',
        routeName: 'stuProduct',
        icon: 'icon-xueyuanguanli'


    }
}
</script>
<style lang="less">
.el-avatar--large {
    border-radius: 50% !important;
}

.search {
    margin: 20px 0;
}
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>